<template>
	<view class="content">
		<view class="_searchBox">
			<uni-row class="demo-uni-row">
				<uni-col :span="12">
					<view class="demo-uni-col">
						<uni-easyinput prefixIcon="search" v-model="params.searchKey" focus
							placeholder="患者姓名"></uni-easyinput>
					</view>
				</uni-col>
				<uni-col :span="12">
					<view class="demo-uni-col"
						style="display: flex; justify-content: space-between; align-items: center;">
						<uni-easyinput v-model="params.beginAge" focus placeholder="开始年龄"></uni-easyinput>
						<view style="margin: 0 3rpx;">
							—
						</view>
						<uni-easyinput v-model="params.endAge" focus placeholder="结束年龄"></uni-easyinput>
					</view>
				</uni-col>
			</uni-row>
			<uni-row class="demo-uni-row">
				<uni-col :span="12">
					<view class="demo-uni-col">
						<uni-easyinput prefixIcon="search" v-model="params.diagnosticName" focus
							placeholder="诊断名称"></uni-easyinput>
					</view>
				</uni-col>
				<uni-col :span="12">
					<view class="demo-uni-col">
						<uni-datetime-picker v-model="range" type="daterange" @change="maskClick" />
					</view>
				</uni-col>
			</uni-row>

			<uni-row class="demo-uni-row">
				<uni-col :span="12">
					&nbsp;
				</uni-col>

				<uni-col :span="12">
					<view class="demo-uni-col" style="display: flex; justify-content: space-between;">
						<button type="default" size="mini" @click="onEmit">
							重置
						</button>
						<button type="primary" size="mini" @click="onSearch">
							搜索
						</button>
					</view>
				</uni-col>
			</uni-row>
		</view>

		<view class="_main">
			<view class="_items" v-for="item in data" :key="item.id" @click="onClick(item.id)">
				<view class="_rows">
					<view class="_text _b">
						<view class="_icons">
							<image :src="item.gender == 1 ? '../../../static/tb/男.png':'../../../static/tb/女士.png'"
								mode=""></image>
						</view>
						<view style="margin-left: 8rpx;">
							{{item.name}}
						</view>
					</view>
					<view class="_text">
						{{item.tel}}
					</view>
				</view>
				<view class="_rows">
					<view class="_text">
						{{item.age}}
					</view>
					<view class="_text">
						{{item.createTime}}
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from "vue";
	import {
		getPage
	} from "./request.js"

	const params = reactive({
		beginAge: "",
		endAge: "",
		diagnosticName: "",
		begin: "",
		end: "",
		searchKey: "",
		current: 1,
		size: 20,
	})

	const range = ref([])
	const value = ref('')

	const maskClick = (e) => {
		params.begin = e[0]
		params.end = e[1]
	}

	const data = ref([])

	const page = () => {
		getPage(params).then((res) => {
			data.value = res.data.records
		})
	}

	page()

	const onEmit = () => {
		range.value = []
		params.beginAge = ''
		params.endAge = ''
		params.diagnosticName = ''
		params.begin = ''
		params.end = ''
		params.searchKey = ''
		params.current = 1
		params.size = 20

		page()
	}
	const onSearch = () => {
		page()
	}

	const onClick = (id) => {
		uni.navigateTo({
			url: `/pages/view/patient/details?id=${id}`,
		})
	}
</script>

<style lang="scss">
	page {
		background-color: #f0f0f0;
	}

	._searchBox {
		background-color: #ffffff;
	}

	.demo-uni-col {
		width: 90%;
		margin: 20rpx auto;
	}

	._main {
		background-color: #ffffff;
		margin-top: 15rpx;

		._items {
			padding: 8rpx 60rpx 8rpx 20rpx;
			border-bottom: 1px solid #ccc;
			display: flex;
			justify-content: space-between;
			flex-direction: column;

			._text {
				display: flex;
				align-items: center;
			}

			._b {
				font-weight: 600;
			}

			._rows {
				margin: 7rpx 0;
				display: flex;
				justify-content: space-between;
			}
		}
	}

	._icons {

		width: 44rpx;
		height: 44rpx;
		border-radius: 50%;
		padding: 6rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 100%;
			height: 100%;
			vertical-align: middle;
		}

	}
</style>